import { currentUser } from '@/services/ant-design-pro/api';
// import { PlusOutlined } from '@ant-design/icons';
// import type { ActionType, ProColumns, ProDescriptionsItemProps } from '@ant-design/pro-components';
import {
  PageContainer,
} from '@ant-design/pro-components';
import '@umijs/max';
import { useModel } from '@umijs/max';
import {  Input ,Form ,Image } from 'antd';
import type { FormInstance} from 'antd';
import React, { useEffect, useRef, useState } from 'react';
// import customParseFormat from 'dayjs/plugin/customParseFormat';

type Info = {
    name?:string;
    title?:string|number;
    date?:string;
    avatar?:string;
    userid?: string;
    email?: string;
    signature?: string;
    group?: string;
  };
  

// dayjs.extend(customParseFormat);
const FormItem = Form.Item;
const Person:React.FC = () => {
    const [info, setInfo] = useState<Info>();
    const formRef = useRef<FormInstance| null>(null);
    const { initialState } = useModel('@@initialState');
    useEffect(() => {
       const getData = async ()=> await currentUser().then(res => {
        setInfo(res?.data);
        formRef?.current?.setFieldsValue({...res.data});
       });
       getData()
    },[])
    return (
        <PageContainer style={{minHeight: "80vh"}}>
            <div style={{display: "flex"}}>
            <Form   
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 14 }}
            layout="horizontal"
            style={{ maxWidth: 450, flex: "2 0 auto" }}
            ref={formRef}
            disabled
            >
             <FormItem  label="姓名" name="name">
                <Input />
             </FormItem>
             <FormItem  label="邮件" name="email">
                <Input />
             </FormItem>
             <FormItem  label="职务" name="title">
                <Input />
             </FormItem>
             <FormItem  label="个性签名" name="signature">
                <Input />
             </FormItem>
             <FormItem  label="电话" name="phone">
                <Input />
             </FormItem>
             <FormItem  label="部门" name="group">
                <Input />
             </FormItem>
          </Form>
          <Form
           labelCol={{ span: 4 }}
           wrapperCol={{ span: 14 }}
           layout="horizontal"
           style={{ maxWidth: 450,flex: "2 0 auto" }}
          >
          <FormItem  label="照片" name="avatar">
             <Image
                    width={200}
                    src={info?.avatar}
                    preview={{
                    src:info?.avatar,
                    }}
                />
             </FormItem>
          </Form>
            </div>
        </PageContainer>
    )
}


export default Person;
